html:has(.info-box) {
    --info-box-bg: 255 255 255;
}
html:has(.info-box) #info-box {
    position: absolute;
    bottom: 0;
    left: 0;
}
html:has(.info-box)[data-debug=true] > body *:not(#info-box *) {
    outline: 1px dashed red !important;
}
html:has(.info-box)[data-debug=true] > body *:not(#info-box *):before, html:has(.info-box)[data-debug=true] > body *:not(#info-box *):after {
    outline: 1px dashed red !important;
}
html:has(.info-box)[data-is-dark=true] {
    --info-box-bg: 255 255 255;
}
html:has(.info-box)[data-is-dark=false] {
    --info-box-bg: 0 0 0;
}
html:has(.info-box) .info-box {
    --presentation-width: 0;
    --presentation-height: 0;
    font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
    position: fixed;
    z-index: 100000000;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 9px;
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(var(--info-box-bg)/40%);
    color: rgba(255, 255, 255, 0.85);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    grid-gap: 24px;
    font-size: 13px;
    transition: transform 0.2s ease;
}
@layer {
    html:has(.info-box) .info-box {
        --icon-chrome: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none'%3E%3Cpath fill='%23fff' d='M60 0C26.895 0 0 26.895 0 60c0 33.105 26.895 60 60 60 33.105 0 60-26.895 60-60 0-33.105-26.895-60-60-60Zm0 5.454c20.213 0 37.821 10.966 47.244 27.272H60a2.73 2.73 0 0 0-.322.016A27.272 27.272 0 0 0 32.95 56.785L16.102 27.604C26.031 14.164 41.985 5.455 60 5.455ZM12.756 32.722 36.38 73.636h.001c.07.122.15.237.24.347A27.275 27.275 0 0 0 60 87.273a27.277 27.277 0 0 0 10.72-2.202l-16.822 29.134c-27.279-3.027-48.444-26.11-48.444-54.203a54.331 54.331 0 0 1 7.304-27.279h-.002ZM60 38.182a21.819 21.819 0 1 1-.002 43.638A21.819 21.819 0 0 1 60 38.182Zm16.318 0h33.688a54.41 54.41 0 0 1 4.539 21.819c0 30.156-24.388 54.544-54.542 54.546l23.618-40.91v.002c.078-.135.145-.276.2-.421a27.274 27.274 0 0 0 3.45-13.216 27.272 27.272 0 0 0-10.953-21.818v-.002Z'/%3E%3C/svg%3E");
        --icon-safari: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' fill='none'%3E%3Cpath fill='%23FFF' d='M35.069 87.132a2.4 2.4 0 0 1-1.997-3.732l20.135-30.18a2.399 2.399 0 0 1 3.692-.365l10.067 10.06a2.398 2.398 0 0 1-.366 3.694L36.398 86.731c-.404.269-.868.402-1.33.402Zm20.508-28.815L43.725 76.082l17.777-11.844-5.925-5.921Z'/%3E%3Cpath fill='%23FFF' d='M65.606 66.673c-.632 0-1.243-.25-1.696-.702L53.843 55.91a2.398 2.398 0 0 1 .366-3.695l30.202-20.12a2.4 2.4 0 0 1 3.328 3.33l-20.136 30.18a2.399 2.399 0 0 1-1.998 1.067h.001Zm-6.298-12.086 5.926 5.921 11.852-17.763-17.778 11.842Z'/%3E%3Cpath fill='%23FFF' d='M88.8 120H31.2C13.997 120 0 106.004 0 88.8V31.2C0 13.997 13.996 0 31.2 0h57.6C106.003 0 120 13.996 120 31.2v57.6c0 17.203-13.996 31.2-31.2 31.2ZM31.2 4.801c-14.556 0-26.399 11.843-26.399 26.4V88.8c0 14.556 11.843 26.399 26.4 26.399H88.8c14.556 0 26.399-11.843 26.399-26.4V31.2c0-14.556-11.843-26.399-26.4-26.399H31.2Zm29.375 97.085c-23.53 0-42.67-19.128-42.67-42.64s19.142-42.642 42.67-42.642c23.529 0 42.67 19.129 42.67 42.641 0 23.514-19.142 42.641-42.67 42.641Zm0-80.48c-20.882 0-37.87 16.974-37.87 37.84 0 20.864 16.988 37.842 37.87 37.842 20.881 0 37.87-16.976 37.87-37.843 0-20.865-16.988-37.84-37.87-37.84Z'/%3E%3C/svg%3E");
        --icon-firefox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='127' height='122' fill='none'%3E%3Cpath fill='%23fff' stroke='%23fff' d='m42.479 52.83.012-.007c.038.007.086.018.145.034.126.035.268.082.426.135l.007.002c.15.05.316.105.472.148.152.041.334.082.507.082h.086c.739.001 1.346.002 1.903-.54 1.158-.937 1.606-2.215 1.717-3.485.097-1.118-.063-2.264-.245-3.232L62.07 38.69c.517-.259 1-.751 1.3-1.291.294-.528.48-1.234.166-1.863a4.239 4.239 0 0 0-1.002-1.294c-.411-.353-.937-.638-1.515-.638h-6.21c-3.078 0-5.606-.308-7.45-.906-1.861-.604-2.912-1.461-3.25-2.476-.27-.805-.237-1.81.055-2.958.29-1.142.826-2.38 1.512-3.625 1.372-2.49 3.308-4.935 4.934-6.56.493-.493 1.058-1.547.508-2.646-.51-1.02-1.528-1.518-2.517-1.518-8.313 0-12.973 5.276-15.518 8.629-1.697-.367-3.975-.454-6.12-.405-2.216.05-4.34.246-5.628.45-.21-.091-.478-.265-.794-.528-.363-.303-.759-.697-1.162-1.15a21.191 21.191 0 0 1-2.221-3.03l-.005-.007c-1.007-1.61-1.819-3.535-2.379-5.316-.563-1.79-.856-3.39-.856-4.35 0-.498-.126-1.019-.456-1.48-.316-.443-.794-.796-1.448-1.031a1.23 1.23 0 0 0-.656-.225 2.445 2.445 0 0 0-.752.078c-.464.116-.973.355-1.267.65l-.006.005-.005.006c-3.214 3.427-4.375 7.8-4.533 11.96-.155 4.064.645 7.964 1.464 10.682C1.315 37.873.5 51.102.5 58.517.5 92.722 29.282 121.5 63.088 121.5c35.03 0 62.589-26.691 62.589-60.5v-4.138c0-30.445-20.031-50.489-39.264-56.34L86.344.5h-.075c-.487 0-1.073.12-1.6.353-.52.232-1.052.607-1.33 1.165-.28.559-.266 1.218-.08 1.778.183.549.557 1.075 1.099 1.359C89.41 8.603 94.32 15.53 97.97 23.603c3.653 8.074 6.01 17.21 6.01 24.983 0 1.362-.001 3.058-.116 4.75-2.309-7.841-6.558-15.375-11.893-19.203-1.024-.992-2.561-.982-3.574.03-1.014 1.014-.994 2.501-.508 3.475l.019.037.024.033c3.204 4.404 3.63 10.45 3.63 17.085 0 16.31-11.4 28.466-26.405 28.466-3.204 0-5.615-.002-7.843-.372a36.526 36.526 0 0 0 3.224-1.202c.548-.23 1.083-.462 1.615-.693 1.05-.457 2.087-.907 3.18-1.317l.015-.006.016-.007c4.565-2.074 8.61-3.68 12.21-3.68 1.036 0 1.578-.541 1.995-.958l.015-.015c.318-.318.444-.754.502-1.1.058-.35.058-.695.058-.9V73c0-.09-.023-.204-.041-.286a7.317 7.317 0 0 0-.1-.393c-.086-.314-.219-.734-.401-1.223a17.71 17.71 0 0 0-1.765-3.494c-1.652-2.504-4.374-5.035-8.54-5.035-2.91 0-4.632.933-6.062 1.707-.27.146-.53.287-.785.415-.171.085-.339.173-.508.262-.682.357-1.396.73-2.51 1.049-1.39.397-3.41.705-6.693.705-2.666 0-6.213-.31-9.074-1.464-2.849-1.149-4.913-3.08-4.913-6.312 0-1.86 1.105-3.77 1.93-5.019a25.17 25.17 0 0 1 1.388-.857c.177-.101.315-.176.408-.226ZM11.38 29.361l.053-.106v-.115a1.33 1.33 0 0 1 .06-.063l.01-.01c.113-.112.344-.343.344-.758v-.009c0-.206 0-.454-.061-.761a4.348 4.348 0 0 0-.39-1.076 31.036 31.036 0 0 1-1.314-5.214c-.34-2.165-.46-4.684.082-7.074.3.73.62 1.423.939 2.09.102.215.203.427.304.635.413.86.805 1.675 1.132 2.492l.007.019.01.019c.441.883 1.821 2.892 3.508 4.578.846.845 1.79 1.631 2.754 2.155.954.517 1.99.81 2.986.566.985-.195 3.512-.299 5.997-.299 1.235 0 2.442.026 3.414.077.486.026.909.057 1.245.095.32.035.53.073.64.104.551.26 1.193.243 1.74.06.534-.177 1.046-.535 1.335-1.052l.36-.361.044-.044.032-.053c.964-1.606 2.683-3.699 4.732-5.086-.878 1.477-1.686 3.097-2.222 4.78-.745 2.341-.974 4.838-.1 7.248 1.237 3.697 5.069 5.76 11.129 6.4l-7.16 3.75c-.556.28-.939.814-1.125 1.372-.187.56-.2 1.22.079 1.779.318.636.621 1.5.731 2.187a4.598 4.598 0 0 0-1.717.436c-1.975.668-3.802 2.19-5.135 4.109-1.341 1.932-2.21 4.305-2.21 6.699 0 1.93.428 5.182 3.089 7.95 2.662 2.77 7.472 4.964 16.037 4.964 3.966 0 6.605-.417 8.528-1.005 1.802-.55 2.956-1.245 3.942-1.84l.205-.123.01-.006.01-.007c.613-.408 1.085-.687 1.64-.872.553-.185 1.22-.285 2.222-.285 2.314 0 3.793 1.792 4.659 3.642-3.578.532-7.136 2.113-10.615 3.658l-.036.016c-4.988 2.078-9.857 4.098-14.704 4.098-.482 0-1.078.117-1.569.363-.473.236-1 .677-1 1.378v.028c0 .396 0 .964.118 1.438.061.245.165.516.36.73a1.1 1.1 0 0 0 .672.36c5.878 4.157 10.957 4.565 17.976 4.565 18.104 0 31.544-14.323 31.544-33.604v-.014c0-1.942 0-3.715-.127-5.56 1.764 3.897 2.929 8.198 3.266 12.217.004.481.125.989.395 1.393.264.397.677.696 1.224.736a3.16 3.16 0 0 0 1.313.314c.433 0 .869-.118 1.194-.419 2.598-1.748 3.882-4.35 4.518-6.998.635-2.644.635-5.382.635-7.442v-.02c0-10.975-4.408-26.334-11.859-37.152 12.605 8.223 23.276 24.054 23.276 45.428V61c0 31.155-25.008 55.362-57.449 55.362-31.177 0-57.449-26.668-57.449-57.845 0-7.016.83-19.332 5.742-29.155Z'/%3E%3C/svg%3E");
        --green-color-dp3: color(display-p3 0.19 0.78 0.24);
        --green-color: var(--green-color-dp3, hsl(142.41 100% 38%));
    }
}
html:has(.info-box) .info-box:before, html:has(.info-box) .info-box:after {
    box-sizing: border-box;
}
html:has(.info-box) .info-box[data-toggled=true] {
    transform: translateY(100px);
}
html:has(.info-box) .info-box[data-toggled=true] button {
    transform: translateY(-40px);
}
html:has(.info-box) .info-box p {
    margin: 0;
}
html:has(.info-box) .info-box a {
    color: white;
    font-weight: bold;
}
html:has(.info-box) .info-box .credits p {
    margin-bottom: 4px;
}
html:has(.info-box) .info-box .credits p:nth-child(2) {
    font-size: 0.8em;
}
html:has(.info-box) .info-box .credits p:nth-child(2) a {
    overflow: hidden;
    white-space: nowrap;
    font-family: sans-serif;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: middle;
    max-width: 20vw;
}
html:has(.info-box) .info-box .controls {
    padding-left: calc(2em + 8px);
}
html:has(.info-box) .info-box .controls > div {
    margin-bottom: 4px;
}
html:has(.info-box) .info-box input[type=checkbox] {
    display: none;
}
html:has(.info-box) .info-box input[type=checkbox] ~ label {
    position: relative;
    cursor: pointer;
}
html:has(.info-box) .info-box input[type=checkbox] ~ label:before {
    position: absolute;
    display: block;
    content: "";
    height: 100%;
    width: 2em;
    left: calc(-2em - 8px);
    top: 0;
    background: transparent;
    outline: 1px solid gainsboro;
    outline-offset: -1px;
    border-radius: 3px;
}
html:has(.info-box) .info-box input[type=checkbox] ~ label:after {
    position: absolute;
    display: block;
    content: "";
    height: 1em;
    width: 1em;
    top: calc(50% + 0.5px);
    left: 0;
    transform: translateY(-50%) translateX(calc(calc(-2em - 8px) + 2px));
    background: radial-gradient(rgba(0, 0, 0, 0.1) 2px, rgba(100, 100, 100, 0.6) 2px, transparent 3px), linear-gradient(#8c8c8c, #8c8c8c);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(0, 0, 0, 0.6);
    border-radius: 3px;
    transition: transform 0.2s cubic-bezier(0.22, 0.7, 0.21, 1.2);
}
html:has(.info-box) .info-box input[type=checkbox]:checked ~ label:after {
    transform: translateY(-50%) translateX(calc(-1em - 10px));
    background: radial-gradient(var(--green-color) 2px, rgba(100, 100, 100, 0.6) 2px, transparent 3px), linear-gradient(gainsboro, #8c8c8c);
}
html:has(.info-box) .info-box:after {
    background-size: 1.1em;
    background-repeat: no-repeat;
    padding-left: 1.5rem;
}
html:has(.info-box) .info-box:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0;
    top: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
}
html:has(.info-box) .info-box kbd {
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 1px 1px rgba(255, 255, 255, 0.5);
    font-size: 0.85em;
    line-height: 0.85em;
    display: inline-block;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 3px 5px;
    white-space: nowrap;
}
html:has(.info-box) .info-box button {
    all: unset;
    position: absolute;
    right: 8px;
    top: -32px;
    border-radius: 50px;
    padding: 0.25em;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 1px 1px rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: transform 0.2s ease;
}
html:has(.info-box) .info-box button:not(:hover) {
    opacity: 0.4;
}
html:has(.info-box) .info-box button svg {
    position: relative;
    width: 18px;
    height: 18px;
}
html:has(.info-box) .chrome .info-box:after {
    content: attr(data-info-chrome);
    background-image: var(--icon-chrome);
}
html:has(.info-box) .safari .info-box:after {
    content: attr(data-info-safari);
    background-image: var(--icon-safari);
}
html:has(.info-box) .firefox .info-box:after {
    content: attr(data-info-firefox);
    background-image: var(--icon-firefox);
}
html:has(.info-box)[data-presentation=true] {
    --bg-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    background: red;
    background: var(--bg-grain), conic-gradient(from 140deg at 50% 110%, #1a0d00, #00011a, #fffffa, #15009e, #d232aa, #fa8c3d, #fff480, #fffffa, #7ed4fb, #040d8b, #010014) no-repeat center center;
    background-blend-mode: color-burn;
    background-size: 100px, 200%;
    display: flex;
    align-items: center;
    justify-content: center;
}
html:has(.info-box)[data-presentation=true]:has(#info-box[data-presentation-title=true]) body:after {
    content: attr(data-title);
    font-size: 12px;
    width: 100%;
    text-align: left;
    position: absolute;
    display: block;
    padding: 0.5em 1em;
    color: white;
    background: linear-gradient(to bottom, transparent, black);
    border-bottom: 1px solid #444;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    font-family: "Nimbus Mono PS", "Courier New", "Cutive Mono", monospace;
    font-weight: bold;
    top: 0;
    left: 0;
}
html:has(.info-box)[data-presentation=true][data-theme=blue] {
    --bg-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    background: var(--bg-grain), conic-gradient(from 140deg at 50% 110%, #A1E3FF, #AE84FF, #0e0759) no-repeat center center;
    background-size: 100px, 200%;
}
html:has(.info-box)[data-presentation=true] body {
    width: var(--presentation-width);
    height: var(--presentation-height);
    position: relative;
    margin: auto !important;
    border-radius: 12px;
    box-shadow: 0 6px 12px -3px rgba(0, 0, 0, 0.2), 0 16px 22px -8px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: width 0.3s ease, height 0.3s ease;
}
html:has(.info-box)[data-presentation=true] .info-box {
    background: rgba(0, 0, 0, 0.4);
}